<template>
  <el-container class="goods-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <!-- <div class="label sa-flex">
          <span class="left">众筹管理</span>
          <search-condition
              :conditionLabel="filterParams.conditionLabel"
              @deleteFilter="deleteFilter"
          ></search-condition>
        </div> -->
        <el-tabs class="sa-tabs" v-model="filterParams.data.audit_status" @tab-change="getData(1,$event)">
          <el-tab-pane v-for="c in state.configList" :key="c.id" :label="c.name" :name="c.id"></el-tab-pane>
        </el-tabs>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
         
         
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap" v-loading="loading">
        <el-table
            height="100%"
            class="sa-table"
            :data="table.data"
            @selection-change="changeSelection"
            @sort-change="fieldFilter"
            :expand-row-keys="expandRowKeys"
            row-key="id"
            stripe
        >
          <template #empty>
            <sa-empty></sa-empty>
          </template>
          <el-table-column label="" min-width="80"></el-table-column>
          
          <el-table-column  prop="daren_id" label="达人ID" min-width="80"></el-table-column>
          <el-table-column  prop="platform" label="平台" min-width="80">
            <template #default="scope">
              {{ scope.row.platform.text }}
            </template>
          </el-table-column>
          
          <el-table-column prop="daren_type" label="达人类型" min-width="100">
            <template #default="scope">
              {{ scope.row.daren_type.text }}
            </template>
          </el-table-column>
          <el-table-column prop="machine_goods_code" label="头像" min-width="120">
            <template #default="scope">
              <sa-image :url="scope.row.head_picture" size="64" radius="32"></sa-image>
            </template>

          </el-table-column>
          <el-table-column prop="platform_account" label="抖音号/快手号" min-width="170"></el-table-column>
          <el-table-column prop="platform_uid" label="UID" min-width="120"></el-table-column>
          <el-table-column prop="phone_number" label="联系电话" min-width="120"></el-table-column>
          <el-table-column label="性别" min-width="120">
            <template #default="scope">
              {{ scope.row.sex.text }}
            </template>
          </el-table-column>
          <el-table-column prop="commerce_level" label="带货等级" min-width="120"></el-table-column>
          <el-table-column prop="group_level" label="团购等级" min-width="120"></el-table-column>
          <el-table-column prop="x_sales_volume" label="带货分" min-width="120">
            <template #default="scope">
              {{ scope.row.commerce_number }}
            </template>
          </el-table-column>
          <el-table-column prop="fans" label="粉丝量" min-width="120"></el-table-column>
          
          <el-table-column prop="s_speed" label="申请用户" min-width="120">
            <template #default="scope">
              <sa-user-profile :id="scope.row.user_id" :user="scope.row.user"/>
            </template>
          </el-table-column>
          <el-table-column prop="r_popularity" label="审核状态" min-width="120">
            <template #default="scope">
              <text :style="{color:colorList[scope.row.audit_status?.value]}">{{ scope.row.audit_status?.text}}</text>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="172">
            <template #default="scope">{{ scope.row.create_time || '-' }}</template>
          </el-table-column>
          
          <el-table-column label="操作" min-width="120" fixed="right">
            <template #default="scope">
              <div class="sa-flex" style="flex-wrap: wrap;">
                <el-button
                    class="is-link"
                    type="primary"
                    @click="seeRow(scope.row)"

                >查看
                </el-button>
                <el-button
                    v-if="scope.row.audit_status.value=='pending'"
                    class="is-link sa-m-l-12"
                    type="primary"
                    @click="handle(scope.row)"

                >审核
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData"/>
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
export default {
  name: 'shop.admin.goods.goods',
};
</script>
<script setup>
import {onMounted, reactive, ref} from 'vue';
import {api} from '../exmaine.service';
import {ElMessageBox} from 'element-plus';
import {useModal, usePagination} from '@/sheep/hooks';
import {useSearch} from '@/sheep/components/sa-table/sa-search/useSearch';
import {composeFilter} from '@/sheep/utils';
import {useRouter} from 'vue-router';
import Edit from './edit.vue';
import SelfSearch from './search.vue';
import HandleExamine from '../comment/handleExamine.vue';


import {useRoute} from 'vue-router';


import {cloneDeep} from 'lodash';
const colorList={pending:'#8069f6',pass:'#32cb4f',back:'#db2424'}


const route = useRoute();

const router = useRouter();
// getType
const statusList = reactive({
  data: [],
  color: {
    all: '',
    up: 'success',
    down: 'danger',
    hidden: 'info',
  },
});
const state = reactive({
  raiseTypeList:{},
  configList:[
    {id:0,name:'全部'},
    {id:'pending',name:'待审核'},
    {id:'pass',name:'已通过'},
    {id:'back',name:'已拒绝'},

  ]
});

   


const filterParams = reactive({
  tools: {
    daren_id: {
      type: 'tinput',
      label: '达人ID',
      field: 'daren_id',
      value: '',
    },
    platform_account: {
      type: 'tinput',
      label: '抖音号/快手号',
      field: 'platform_account',
      value: '',
    },
    phone_number: {
      type: 'tinput',
      label: '联系电话',
      field: 'phone_number',
      value: '',
    },
    order_range: {
      type: 'tinput',
      label: '接单范围',
      field: 'order_range',
      value: '',
    },
    platform: {
      type: 'tselect',
      label: '平台',
      field: 'platform',
      value: '',
      options: {
        data: [
          {name:'抖音',id:'douying'},
          {name:'快手',id:'kuaishou'},
        ],
        props: {
          label: 'name',
          value: 'id',
        },
      },
    },
    commerce_level_range: {label: '带货等级', value: {min: '', max: ''}},
    date: {
        type: 'tdatetimerange',
        label: '创建时间',
        field: 'date',
        value: route.query.create_time || [],
        create_time: route.query.create_time || [],
      },
  },
  data: {
    date:route.query.create_time || [],//创建时间
    audit_status:0,

    commerce_level_range: {min: '', max: ''},


  },
  conditionLabel: {},
});
const {openFilter, deleteFilter} = useSearch({
  comp: SelfSearch,
  filterParams,
  getData,
});

const loading = ref(true);

// 表格
const table = reactive({
  data: [],
  order: null,
  sort: 'sort',
  selected: [],
});

const {pageData} = usePagination();

// 获取数据
async function getData(page,e) {
  loading.value = true;
  if (page) pageData.page = page;
  let tempSearch = cloneDeep(filterParams.data);
  tempSearch.commerce_level_1=tempSearch.commerce_level_range.min
  tempSearch.commerce_level_2=tempSearch.commerce_level_range.max
  delete tempSearch.commerce_level_range
  const {error, data} = await api.daren.list({
    page: pageData.page,
    list_rows: pageData.list_rows,
    ...tempSearch,
  });
  if (error === 0) {
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    if (expandRowKeys.length > 0) {
      getSkuPrice(expandRowKeys[0]);
    }
  }
  loading.value = false;
}

// table 字段排序
function fieldFilter({prop, order}) {
  table.order = order == 'ascending' ? 'asc' :( order == 'descending' ?'desc':null);
  table.sort = prop;
  getData();
}

// table 批量选择
function changeSelection(row) {
  table.selected = row;
}






// 审核
function handle(row){
  useModal(
    HandleExamine,
    {
      title: '修改审核状态',
      class:'sa-width-600'
    },
    {
      confirm: async (e) => {
        let res = await api.daren.statusEdit({id:row.id,audit_status:(e.data.status=='2' ? 'pass':'back'),remark:e.data.remark})
        if(res.error==0){
          await getData()
        }
      },
    },
  );
}




// 查看
function seeRow(row){
  useModal(
      Edit,
      {
        title: '达人详情',
        type: 'see',
        id: row.id,
        class:'sa-width-1000',
      },
      {
        confirm: () => {
        },
      },
  );
}






let expandRowKeys = reactive([]);



const skuPrice = reactive({
  data: [],
});

async function getSkuPrice(id) {
  const {data} = await api.goods.getSkuPrice(id);
  skuPrice.data = data;
}



onMounted(() => {
  getData();
});
</script>
<style lang="scss">
.el-tabs.sa-tabs::after{
  display: none;
}
.goods-dropdown {
  .status-up {
    color: var(--el-color-success);
  }

  .status-down {
    color: var(--el-color-danger);
  }

  .status-hidden {
    color: var(--el-color-info);
  }
}
</style>
<style lang="scss" scoped>
.el-upload {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--el-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  font-weight: var(--el-button-font-weight);
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: var(--el-button-bg-color);
  padding: 8px 15px;
  font-size: var(--el-font-size-base);
  border-radius: var(--el-border-radius-base);
}

.goods-view {
  .el-main {
    .sa-table-wrap {
      margin-left: -48px;
      overflow: hidden;
      height: 100%;

      :deep() {
        .el-table__empty-text {
          margin-left: 48px;
        }
      }

      .title {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: var(--sa-font);
      }

      .subtitle {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }

      .goods-tag {
        max-width: 76px;
        padding: 3px 8px;
        border-radius: 10px;
        line-height: 14px;
        font-size: 12px;
        font-weight: 400;
        margin-right: 8px;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }

        &.promos-goods {
          color: #faad14;
          background: rgba(250, 173, 20, 0.16);
        }

        &.groupon_ladder-goods,
        &.groupon-goods {
          color: var(--el-color-primary);
          background: var(--t-bg-active);
        }

        &.seckill-goods {
          color: #ff4d4f;
          background: rgba(255, 77, 79, 0.16);
        }
      }

      .sku {
        width: fit-content;
        height: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        padding: 0 8px;
        font-size: 12px;
        color: #fff;
        background: var(--el-color-primary);
        border-radius: 10px;
        cursor: pointer;
      }

      .stock {
        cursor: pointer;

        .add-stock {
          margin-left: 8px;
          color: var(--el-color-primary);
        }
      }

      .el-tag {
        padding: 0 8px;
        border: none;
        cursor: pointer;

        :deep() {
          .el-tag__content {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .sa-expand-table {
      :deep() {
        .el-table__header-wrapper {
          display: none;
        }
      }

      .sku-text {
        font-size: 12px;
        color: var(--sa-font);
      }
    }
  }

  .expand-arrow {
    color: #fff !important;
  }
}
</style>
